import 'dart:developer';

import 'package:application_with_bilibili/pages/mountain.dart';
import 'package:application_with_bilibili/pages/pageViewAll.dart';

import '../../mock/mockListView.dart';
import '../search.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  var lastIndex = 0;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 6, vsync: this);
    // 监听导航栏切换事件，既可以响应点击，也可以响应滑动
    _tabController.addListener(() {
      var index = _tabController.index.toInt();
      if (lastIndex != index) {
        log("welcome to index$index");
      }
      lastIndex = index;
    });
  }

  // 切换页面时，会调用dispose方法
  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
    log("home page dispose");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 顶部导航栏
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(40), // 配置appBar的高度
        child: AppBar(
          // 阴影颜色
          shadowColor: Colors.grey,
          // 阴影高度
          elevation: 1,
          // 背景颜色
          backgroundColor: Colors.white,
          // 标题部分
          title: SizedBox(
            height: 38,
            child: TabBar(
              controller: _tabController,
              isScrollable: true, // 是否可以滚动
              // 自定义指示器
              // indicator: const BoxDecoration(
              //   color: Colors.blue,
              //   borderRadius: BorderRadius.vertical(),
              // ),
              dividerHeight: 0, // 分割线高度，设置0可以去掉分割线
              indicatorColor: const Color.fromARGB(255, 101, 255, 109), // 指示器颜色
              indicatorPadding: const EdgeInsets.only(bottom: 5), // 指示器间距
              indicatorSize:
                  TabBarIndicatorSize.label, // 指示器大小。label:和内容等宽，tab:和整个标签等宽
              labelColor: const Color.fromARGB(255, 255, 4, 4), // 选中标签颜色
              unselectedLabelColor: Colors.black, // 未选中标签颜色
              // labelStyle: ...,
              // unselectedLabelStyle: ...,
              tabs: const [
                Tab(
                  child: Text("列表页"),
                ),
                Tab(
                  child: Text("指定类跳转"),
                ),
                Tab(
                  child: Text("指定路由带参跳转"),
                ),
                Tab(
                  child: Text("指定路由跳转"),
                ),
                Tab(
                  child: Text("弹框"),
                ),
                Tab(
                  child: Text("PageView"),
                ),
              ],
              onTap: (value) => {
                // onTap的点击事件只能响应点击，无法响应滑动，且每次点击都会触发，不需要发生切换
                log("tap value: $value")
              },
            ),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          const Mocklistview(
            valueCount: 15,
          ),
          Center(
            child: ElevatedButton(
                onPressed: () {
                  // 跳转路由
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (BuildContext context) {
                        return const SearchPage();
                      },
                    ),
                  );
                },
                child: const Text("搜索")),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, "/bird", arguments: {"type": "麻雀"});
            },
            child: const Text("进入小鸟"),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, "/flower");
            },
            child: const Text("进入小花"),
          ),
          const MountainPage(),
          const PageViewAllPage(),
        ],
      ),
    );
  }
}
